<template>
  <el-dialog
    title="题目预览"
    :visible="dialogVisible"
    width="50%"
    :center="false"
    @close="CancelDialog"
  >
    <div>
      <el-row>
        <el-col :span="6">【题型】：{{ data.questionType | answer }}</el-col>
        <el-col :span="6">【编号】：{{ data.id }}</el-col>
        <el-col :span="6">【难度】：{{ data.difficulty | stairway }}</el-col>
        <el-col :span="6">【标签】：{{ data.tags }}</el-col>
        <el-col :span="6">【学科】：{{ data.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ data.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ data.direction }}</el-col>
      </el-row>
      <hr />

      <el-row>【题干】:</el-row>

      <!-- 题目 -->
      <!-- 根据题目型号来判断是否显示该区域 -->
      <div v-if="data.questionType=='2'">
        <el-row>多选题 选项 : (以下选中的选项为正确答案)</el-row>
        <!-- 得到的是带有标签的数据，利用v-html来解析标签 -->
        <span v-html="data.question">
          <a>{{ data.question }}</a>
        </span>
        <!-- 双向绑定选项的值 -->

        <!-- 循环数组数据 -->
        <el-checkbox-group :value="isRigth" :border="false">
          <el-checkbox v-for="item in data.options" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 题目 -->
      <div v-else-if="data.questionType=='1'">
        <el-row>单选题 选项 : (以下选中的选项为正确答案)</el-row>
        <!-- 得到的是带有标签的数据，利用v-html来解析标签 -->
        <span v-html="data.question">{{ data.question }}</span>
        <!-- 双向绑定选项的值 -->
        <el-checkbox-group :value="isRigth" :border="false">
          <!-- 循环的到每一项 -->
          <el-checkbox v-for="item in data.options" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 简答题 -->
      <div v-else>
        <el-row>简单题</el-row>
        <span v-html="data.question">{{ data.question }}</span>
      </div>

      <hr />
      <el-row>
        【参考答案】:
        <span>{{ data.answerID }}</span>
        <el-button type="danger" size="small" @click="showVideo">查看答案</el-button>
        <!-- <video v-show="Visible" :src="urlsrc" autoplay controls style="width:400px;height:300px" /> -->
        <video v-show="Visible" :src="urlsrc" autoplay controls style="width:400px;height:300px" />

        <!-- 视频预览区 -->
      </el-row>
      <hr />
      <el-row>
        【答案解析】:
        <span>{{ data.remarks }}</span>
        <!-- 答案 -->
      </el-row>
      <hr />
      <el-row>
        【题目备注】:
        <!-- 备注 -->
        {{ data.remarks }}
      </el-row>
    </div>
    <!-- 题目类型 -->
    <div slot="footer" class="dialog-footer Cancle">
      <el-button class="CancleBtn" type="primary" @click="CancelDialog">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
//  获取基础题库详情
import { detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'QuestionDialog',
  filters: {
    // 题型过滤器
    answer(val) {
      const data = questionType.find((it) => it.value === Number(val))
      return data ? data.label : '未知'
    },
    // 难度过滤器
    stairway(val) {
      const list = difficulty.find((it) => it.value === Number(val))
      return list ? list.label : '未知'
    }
  },
  props: {
    // 弹窗显示
    dialogVisible: {
      type: Boolean,
      required: true
    },
    // 用户Id
    myid: {
      type: [Number, Array, String]
    }
  },
  data() {
    return {
      option: [], // 选项数组
      Visible: false, // 控制视频
      data: [], // 储存弹窗内容数据数组
      isRigth: [], // 保存正确答案
      urlsrc: ''// 控制视频路劲

    }
  },
  methods: {
    // 获取基本的表格数据
    async detail(item) {
      const { data } = await detail(item)
      this.data = data
      this.urlsrc = data.videoURL

      // 拿到选项
      this.option = this.data.options.map((it) => {
        if (it.isRight !== 3) {
          return it.id
        }
      })
      // 选项所队应的id
      this.isRigth = data.options.map((it) => {
        if (it.isRight === 1) {
          return it.id
        }
      })
    },
    // 关闭弹窗
    CancelDialog() {
      // 清空视频路劲
      this.urlsrc = ''
      // 关闭弹窗
      this.$emit('visibleCancel', false)
    },
    // 点击查看视频
    showVideo() {
      this.Visible = true
    }
  }
}
</script>

<style lang="less" scoped>
</style>
